<template>
  <div class="logined">
    <div class="logined_msg">
        <ul>
            <li>
                <input type="file" name="">
                <p>
                    <span>头像</span>
                </p>
            </li>
            <li @click="deve()">
                <p>
                    <span>昵称</span>
                    <i v-text="nickint"></i>
                </p>
            </li>
             <li @click="sex()">
                <p>
                    <span>性别</span>
                    <i>{{msg}}</i>
                </p>
            </li>
            <li @click="sub()">
                <p>
                    <span>职业</span>
                    <i>{{offor}}</i>
                </p>
            </li>
            <li>
                <p>
                    <span>手机号</span>
                    <i>13456788900</i>
                </p>
            </li>
            <li>
                <p>
                    <span>修改密码</span>
                    <i></i>
                </p>
            </li>
            <li>
                 <router-link to="/address">
                    <p>
                        <span>我的收货地址</span>
                         <i></i>
                    </p>
                </router-link>
            </li>
        </ul>
    </div>
    <div class="exit">
        <p @click="back()">返回</p>
        <div @click="logout()">退出登录</div>
    </div>

    <!-- 性别选择页面 -->
    <div class="layer" v-if="flag" @click="exit()">
        <div class="align-ct">
            <h1>性别选择</h1>
            <p class="femail" @click="exit1()">女</p>
            <p class="man" @click="exit2()">男</p>
        </div>
    </div>
    <!-- 职业选择页面 -->
    <div class="layer" @click="exit7()" v-if="show">
        <div class="offo ">
            <h1>职业选择</h1>
            <p  @click="exit3()">学生</p>
            <p @click="exit4()">初入社会</p>
            <p @click="exit5()">资深工作党</p>
            <p @click="exit6()">自由职业</p>
        </div>
    </div>
    <!-- 昵称 -->
    <div class="nick-name" v-if="showup">
        <h1><i class="layer_back" @click="back1()"></i><span>修改昵称</span></h1>
        <input type="text" name="" class="nick-int" value="" v-model="nickint">
        <button class="btn-nic" @click="nicksave()">保存</button>
    </div>
  </div>
</template>

<script>

  export default{
    data(){
        return{
            flag:false,
            show:false,
            showup:false,
            msg:'男',
            offor:'学生',
            nickint:'182OBHIGQ3641'

        }
    },
    methods: {
        back () {
            history.back();
        },
        logout () {
            this.$router.push('/login/');
        },
        sex (){
            this.flag = true
        },
        exit(){
            this.flag = false
        },
         exit7(){
            this.show= false
        },
        exit1 (){
            this.flag = false;
            this.msg = '女';
        },
         exit2 (){
            this.flag = false;
            this.msg = '男'
        },
        sub (){
            this.show= true
        },
        exit3 (){
            this.show = false;
            this.offor = '学生'
        },
        exit4 (){
            this.show = false;
            this.offor = '初入社会'
        },
        exit5 (){
            this.show = false;
            this.offor = '资深工作党'
        },
         exit6 (){
            this.show = false;
            this.offor = '自由职业'
        },
        deve (){
            this.showup = true
        },
        nicksave (){
            this.showup = false
        },
        back1 (){
            this.showup = false
        }

    }
  }

</script>

<style scoped>
/*昵称*/
.nick-name{
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,1);
    position: absolute;
    top: 0;
    left: 0;

}
.btn-nic{
    width: 90%;
    height: 40px;
    background: #fe3355;
    margin-top: 30px;
    color: #FFF;
    margin-left: 15px;
    line-height: 40px;
    text-align: center;
    border: none;
    font-size: 18px;
}
.nick-name>.nick-int{
    height: 36px;
    width: 268px;
    background:#F7F7F7;
    font-size: 14px;
    outline: 0;
    border: 0;
    margin-left: 26px;
    margin-top: 20px;
    border-radius: 10px;
    border: 1px solid #999;
}
.nick-name>h1{
    width: 100%;
    height: 30px;
    border-bottom: solid 1px #f3f3f3;
    padding-bottom: 5px;
    padding-top: 5px;
    font-size: 16px;
    line-height: 30px;
    color: #444;
}
.nick-name>h1>i{
    top: 5px;
    left: 10px;
    width: 30px;
    height: 30px;
    margin-left: 5px;
    display: inline-block;
    line-height: 30px;
    vertical-align: middle;
    background: url('./images/icon_back.png') no-repeat center center;
    background-size: 10px 20px;
}
.nick-name>h1>span{
    width:64px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    margin-left: 113px;
}
.offo{
    width:96% ;
    height:214px ;
    padding-right: 13px;
    background-color: #fff;
    text-align: center;
    position: fixed;
    left: 0;
    bottom: 0;
}
.offo>p{
     border-bottom: solid 1px #ddd;
    line-height: 40px;
    color: #333;
    font-size: 16px;
    text-align: center;
}
.offo>h1{
    font-size: 16px;
    color: #55a5ff;
    border-bottom: solid 1px #55a5ff;
    padding-bottom: 5px;
    padding-top: 5px;
    line-height: 40px;
    height: 40px;
}
.layer{
    width: 100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
}
.layer>.align-ct{
    width: 94%;
    height: 132px;
    padding-right: 10px;
    text-align: center;
    background-color: #fff;
    padding-left: 10px;
    position: fixed;
    left: 0;
    bottom:0;
}
.layer>.align-ct>h1{
    font-size: 16px;
    color: #55a5ff;
    border-bottom: solid 1px #55a5ff;
    padding-bottom: 5px;
    padding-top: 5px;
    line-height: 40px;
    height: 40px;
}
.layer>.align-ct>p{
    border-bottom: solid 1px #ddd;
    line-height: 40px;
    color: #333;
    font-size: 16px;
    text-align: center;
}
.logined{
    width: 100%;
    height: 47.33rem;
    background-color:#f3f3f3;
    position: absolute;
    z-index: 11;
}
.logined_msg{
    background: #FFF;
    padding: 0 10px;
}
.logined_msg ul li{
    position: relative;
    border-bottom:1px solid #eee;
    padding: 12px 0;
}
.logined_msg ul li:first-of-type{
    padding: 5px 0;
}
.logined_msg ul li:first-of-type p{
    line-height: 50px;
}
.logined_msg ul li input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    outline: 0;
    border: 0;
}
.logined_msg ul li p span{
    font-size: 1.2rem;
    color: #333;
}
.logined_msg ul li p i{
    float: right;
    font-size: 1.2rem;
}
.logined_msg ul li:nth-of-type(6),.logined_msg ul li:nth-of-type(7){
    background:url(../../assets/images/rt.png) no-repeat right center;
    background-size: 5px 9px;
}
.exit{
    margin: 30px 20px;
    font-size: 18px;
    text-align: center;
    color:#fff;
    line-height: 50px;
}
.exit p{
    background: #47d2d0;
}
.exit div{
    margin-top: 30px;
    background: #fe3355;
}
</style>
